<template>
  <div class="home-head-container">
    <h3 class="app-title">Yi Mi</h3>
    <com-search class="home-search"/>
    <com-banner class="home-banner" />
  </div>
</template>

<script>
import comSearch from '../../../components/comSearch'
import comBanner from '../../../components/comBanner'

export default {
  components: {
    comSearch,
    comBanner
  }
}
</script>

<style lang="scss" scoped>
.home-head-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: #00e1f1;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-bottom: 24px;
  .app-title {
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding-left: 20px;
    font-size: 24PX;
    font-weight: 600;
    color: #fff;
    position: relative;
    left: 0;
    bottom: -24px;
    z-index: 99;
  }
  .home-search {
    position: relative;
    left: 0;
    bottom: -24px;
    z-index: 99;
    /deep/.search-container {
      background: #00e1f1 !important;
    }
  }
  .home-banner {
    width: 90%;
    margin: 0 auto;
    position: relative;
    bottom: -24px;
    z-index: 99;
  }
}
</style>